<template>
    <div>
        <comA :getcomAData="comAData"/>
        <span>{{textA}}</span>
        <hr/>
        <!-- v-on:可以简写成@ -->
        <comB v-on:comBata="comBData"/>
        <span>{{textB}}</span>
        <hr/>
        <comC ref="comc"/>
        <span>{{textC}}</span>

        <hr/>
        <comD @click.native="comDEvent"/>
        <span>{{textD}}</span>
    </div>
</template>}
<script>
import comA from './component/comA.vue'
import comB from './component/comB.vue'
import comC from './component/comC.vue' 
import comD from './component/comD.vue' 
export default {
    components:{
        comA,
        comB,
        comC,
        comD
    },
    data() {
        return {
            textA:"无值",
            textB:"无值",
            textC:"无值",
            textD:0,
            
        }
    },
    methods:{
        comAData(prayed){
            console.log("父组件接收：",prayed);
            this.textA = prayed

        },
        comBData(prayed){
           console.log("父组件接收：",prayed);
           this.textB = prayed
        },
        comCData(prayed) {
            console.log("父组件接收：",prayed);
            this.textC = prayed
        },
        comDEvent(){
            console.log("触发了comDEvent...");
            this.textD++
        }
       
    },
     mounted() {
         // 灵活性非常强，比如我们在等待请求的数据回来后，在绑定事件
            this.$refs.comc.$on('comCData',this.comCData)
        },
}
</script>